<template>
  <div class="subjects">
    <!-- 按钮 -->
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
     <el-button type="warning" icon="el-icon-download" @click="handleExport" size="mini">导出</el-button>
    </div></el-col>
</el-row>
<!-- 条查 -->
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="关键词" >
    <el-input v-model="form.revenueMoney" placeholder="请输入内容" size="mini"></el-input>
  </el-form-item>
    <el-form-item label="收支方向">
    <el-select v-model="form.status" placeholder="请选择" size="mini">
      <el-option label="收入" value="2"></el-option>
      <el-option label="支出" value="1"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="往来单位">
              <el-select v-model="form.id" placeholder="请选择" size="mini"> 
                <el-option
                  v-for="item in userList"   
                  :key="item.id"
                  :label="item.correspondents" 
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
  <el-form-item label="业务日期">
              <el-date-picker
                size="mini"
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>      
            
    <el-button type="primary" @click="search()" size="mini">查询</el-button>
    <el-button type="primary" @click="Reset()" size="mini">重置</el-button>
  </el-form-item>
</el-form>
    </div></el-col>
</el-row>
<!-- 表格 -->
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="单据编号" width="auto">
      </el-table-column>
    <el-table-column prop="correspondents" label="往来单位" width="auto">
      </el-table-column>
      <el-table-column prop="revenueMoney" label="收入金额" width="auto">
        <template scope="scope">
                  <span v-if="scope.row.revenueMoney>=0" style="color:#37B328">{{ scope.row.revenueMoney }}</span>
                </template>
      </el-table-column>
      <el-table-column prop="outlayMoney" label="支出金额" width="auto">
        <template scope="scope">
                  <span v-if="scope.row.revenueMoney>=0" style="color:#ffa500">{{ scope.row.revenueMoney }}</span>
                </template>
      </el-table-column>
      <el-table-column prop="accountName" label="账户名称" width="auto">
      </el-table-column>
       <el-table-column prop="accountBalance" label="账户余额" width="auto">
        <template scope="scope">
                  <span v-if="scope.row.accountBalance>=0">{{ scope.row.accountBalance }}</span>
                  <span v-else style="color: red">{{ scope.row.accountBalance }}</span>
                </template>
      </el-table-column>
      <el-table-column prop="businessTime" label="业务日期" width="auto">
      </el-table-column>
      <el-table-column prop="billingTime" label="记账时间" width="auto">
      </el-table-column>
      <el-table-column prop="tuser.nickName" label="操作员" width="auto">
      </el-table-column>
      </el-table-column>
                                  
    </el-table>
             <!-- 分页 -->
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNum"
                      :page-sizes="[2, 5, 10, 20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    >
                    </el-pagination>
    </div></el-col>
</el-row>
 <!-- 新增弹框 -->
         
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "subjects",
  data() {
    return {
      //下拉列表框
      userList: [],
      //日期
      dateRange: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      //条查
      form: {
        startTime: "",
        endTime: "",
        status: "",
        revenueMoney: "",
        correspondents: "",
      },
    };
  },
  created() {
    this.search();
    this.searchholiList();
  },
  methods: {
    //下拉列表框
    searchholiList() {
      axios
        .post("http://localhost:8030/flow/findoptions")
        .then((res) => {
          this.userList = res.data;
        })
        .catch((error) => {
          console.error("获取部门列表失败:", error);
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      axios({
        url: "http://localhost:8030/flow/export/excel",
        method: "GET",
        responseType: "arraybuffer", // 接收二进制文件流
      }).then((res) => {
        const content = res.data;
        const blob = new Blob([content], { type: "application/octet-stream" });
        const fileName = "export.xlsx";

        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, fileName);
        } else {
          const fileUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.target = "_blank";
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    //条查 分页
    search() {
      if (this.dateRange.length == 0) {
        this.$http
          .post(
            "http://localhost:8030/flow/findflowPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      } else {
        this.form.startTime = this.dateRange[0];
        this.form.endTime = this.dateRange[1];
        this.$http
          .post(
            "http://localhost:8030/flow/findflowPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      }
    },
    //分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },

    //重置
    Reset() {
      (this.form.id = ""),
        (this.form.startTime = ""),
        (this.form.endTime = "");
      this.dateRange = [];
      (this.form.revenueMoney = ""), (this.form.status = ""), this.search();
    },
  },
};
</script>

<style scoped>
</style>